<template>
  <div class="page">
    <!--直播回放详情-->
    <el-card class="card">
      <div class="card-title">直播回放详情</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in details">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div v-if="i.type==='string'">{{ i.data }}</div>
                <div v-else-if="i.type==='look'">
                  <div class="click" tabindex="1" @click="lookPlayback">点击查看</div>
                </div>
                <div v-else-if="i.type==='download'">
                  <div class="click" tabindex="1" @click="download">点击下载</div>
                </div>
                <div v-else-if="i.type==='img'">
                  <img src="./logo1.jpg"/>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="last-tr">
          <td colspan="3">
            <div class="last-item">
              <div class="last-label"><div class="last-text">简介</div></div>
              <div class="last-data">直播优惠大放送，走过路过不要错过，快进来看直播吧</div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--直播回放数据-->
    <el-card class="card">
      <div class="card-title">直播回放数据</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in playbackData">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div v-if="i.type==='string'">{{ i.data }}</div>
                <div v-else-if="i.type==='look'">
                  <div class="click" tabindex="1" @click="viewData">点击查看</div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--商品橱窗-->
    <el-card class="card">
      <div class="card-title">商品橱窗</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="shopWindowData" stripe>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="picture" label="图片" align="center">
            <img src="./logo1.jpg" style="width:50px;height:50px;"/>
          </el-table-column>
          <el-table-column prop="price" label="价格(￥)" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" align="center"></el-table-column>
          <el-table-column prop="link" label="商品外部链接" align="center"></el-table-column>
          <el-table-column prop="salesVolume" label="当前销量" align="center"></el-table-column>
          <el-table-column prop="salesTotal" label="累计销售金额(￥)" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleProductSizeChange"
            @current-change="handleProductCurrentChange"
            :current-page="shopWindow.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="shopWindow.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="shopWindow.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--订单销售情况-->
    <el-card class="card">
      <div class="card-title">订单销售情况</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="salesData" stripe>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
          <el-table-column prop="commodityName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="commodityNumber" label="商品数量" align="center"></el-table-column>
          <el-table-column prop="orderAmount" label="下单金额(￥)" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSalesSizeChange"
            @current-change="handleSalesCurrentChange"
            :current-page="sales.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="sales.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="sales.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--评论管理-->
    <el-card class="card">
      <div class="card-title">评论管理</div>
      <el-divider></el-divider>
      <div class="el-table">
        <el-table :data="commentsData" stripe>
          <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="commentContent" label="评论内容" align="center"></el-table-column>
          <el-table-column prop="commentTime" label="评论时间" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleCommentSizeChange"
            @current-change="handleCommentCurrentChange"
            :current-page="comments.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="comments.pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="comments.total"
          ></el-pagination>
        </div>
      </div>
    </el-card>

    <!--备注-->
    <el-card class="card">
      <div class="card-title">
        <div class="left">备注</div>
        <div class="right">
          <el-button type="success" @click="editNote">编辑</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="note">
        {{ note }}
      </div>
    </el-card>

    <!--视频回放弹框-->
    <playback @close="closePlayback" :id="id" :is-playback="isPlayback"></playback>
    <!--编辑备注弹框-->
    <remark @close="closeEditNote" :id="id" :is-remark="isRemark"></remark>
  </div>
</template>

<script>
import Remark from '@/framework/components/dialog/live/playback/show/remark'
import Playback from "@/framework/components/dialog/live/playback/show/playback";
import PageMixin from '@/framework/mixins/pageMixin'
import {findByLive} from "@/project/service/product"

export default {
  name: "show",
  mixins: [
    PageMixin,
  ],
  data(){
    return{
      //直播回放详情
      details:[
        [
          {label:"直播间ID",data:'653254',type:'string'},
          {label:"直播间标题",data:'国际纺织展览会',type:'string'},
          {label:"封面",data:'',type:'img'}
        ],
        [
          {label:"开播时间",data:'2022-01-05 12:00',type:'string'},
          {label:"结束时间",data:'2022-01-05 15:00',type:'string'},
          {label:"直播时长(h)",data:'3.6',type:'string'}
        ],
        [
          {label:"观看总人数",data:'654',type:'string'},
          {label:"点赞数",data:'36',type:'string'},
          {label:"直播定位地址",data:'广州市天河区乐天大厦',type:'string'}
        ],
        [
          {label:"直播屏幕方向",data:'竖屏',type:'string'},
          {label:"标签",data:'时尚周、T台秀',type:'string'},
          {label:"视频回放",data:'',type:'look'}],
        [
          {label:"回放视频ID",data:'573629857719347889',type:'string'},
          {label:"视频大小(GB)",data:'2.4',type:'string'},
          {label:"视频时长(min)",data:'178',type:'string'}
        ],
        [
          {label:"视频分辨率",data:'1280*720',type:'string'},
          {label:"视频码率(kbps)",data:'5000',type:'string'},
          {label:"回放下载",data:'',type:'download'}
        ],
        [
          {label:"播放页面地址",data:'https://www.baidu.com',type:'string'},
          {label:"播放页面二维码(h5)",data:'',type:'img'},
          {label:"播放页面二维码(小程序)",data:'',type:'img'}
        ],
      ],
      //直播回放数据
      playbackData:[
        [
          {label:"总访问人次",data:'283',type:'string'},
          {label:"总访问人数",data:'134',type:'string'},
          {label:"观看总人数",data:'234',type:'string'}
        ],
        [
          {label:"点赞数",data:'134',type:'string'},
          {label:"转发数",data:'23',type:'string'},
          {label:"数据统计",data:'点击查看',type:'look'}
        ],
      ],
      //商品橱窗
      shopWindowData:[
        // {name:'纯棉布料',picture:'888',price:'',type:'外部商品',link:'https://www.taobao.com',salesVolume:'',salesTotal:''},
        // {name:'衬衫布料',picture:'888',price:'9.9',type:'SAAS商城商品',link:'',salesVolume:'10',salesTotal:'99'},
        // {name:'帆布布料',picture:'888',price:'19.9',type:'外部商品',link:'https://www.taobao.com',salesVolume:'',salesTotal:''},
      ],
      //商品橱窗的分页信息
      shopWindow:{
        page:1,
        pageSize:10,
        total:0,
      },
      //订单销售情况
      salesData:[
        {nickname:'张三',orderNumber:'65452452154125324',commodityName:'纺织品',commodityNumber:'10',orderAmount:'653.12'},
        {nickname:'李四',orderNumber:'65452452154125325',commodityName:'纺织布料',commodityNumber:'1',orderAmount:'9554.50'},
        {nickname:'刘备',orderNumber:'65452452154125326',commodityName:'纺织布料',commodityNumber:'2',orderAmount:'65.00'},
        {nickname:'诸葛亮',orderNumber:'65452452154125327',commodityName:'纺织布料',commodityNumber:'5',orderAmount:'68.00'},
        {nickname:'关羽',orderNumber:'65452452154125328',commodityName:'纺织布料',commodityNumber:'1',orderAmount:'963.00'},
      ],
      //订单销售情况的分页信息
      sales:{
        page:1,
        pageSize:10,
        total:0,
      },
      //评论管理
      commentsData:[
        {nickname:'张三',commentContent:'这个纺织品多少钱？',commentTime:'2022.01.03 11:00'},
        {nickname:'李四',commentContent:'赞',commentTime:'2022.01.08 12:00'},
        {nickname:'刘备',commentContent:'冲冲冲',commentTime:'2022.02.05 16:00'},
        {nickname:'关羽',commentContent:'666',commentTime:'2022.02.08 15:00'},
      ],
      //评论管理的分页信息
      comments:{
        page:1,
        pageSize:10,
        total:0,
      },
      isPlayback: false,//是否查看视频回放
      isRemark: false,//编辑备注
      showInfo:[],
      id:'',
      note:'电商直播服务商，集营销，引流，销售于一体，帮助电商快速开播，内嵌商城，加速购买决策，红包，拼团，秒杀等功能引爆直播气氛，小程序观看下单，流量沉淀无外流，打造专属私域流量池。电商直播服务商，集营销，引流，销售于一体，帮助电商快速开播，内嵌商城，加速购买决策，红包，拼团，秒杀等功能引爆直播气氛，小程序观看下单，流量沉淀无外流，打造专属私域流量池。',//备注内容
    }
  },
  components: { Playback, Remark },
  created() {
    this.id = this.$route.params.id == ':id' ? sessionStorage.getItem('showId') : this.$route.params.id
    // console.log("查看ID:"+this.id)

    this.findProduct(this.id)
  },
  methods:{
    //获取商品橱窗数据
    findProduct(id){
      let param = {
        product:{live:{id}},
        pageable:{
          page: this.shopWindow.page,
          size: this.shopWindow.pageSize,
          sort: 'id',
          desc: true
        }
      }
      console.log(param)
      findByLive(param,data => {
        console.log(data)
      })
    },
    //列表更新
    listUpdate(){
      this.findProduct()
      // this.getCount()
    },
    //查看视频回放
    lookPlayback(){
      this.isPlayback = true
    },
    //关闭视频回放
    closePlayback(isPlayback){
      this.isPlayback = isPlayback
    },
    //点击下载
    download(){

    },
    //查看回放数据
    viewData(){
      this.$router.push({path:'/live/playback/show/dataStatistics/' + this.id})
    },
    //编辑备注
    editNote(){
      this.isRemark = true
    },
    //关闭编辑备注
    closeEditNote(isRemark){
      this.isRemark = isRemark
    },
    //商品橱窗页码改变
    handleProductCurrentChange(val) {
      this.shopWindow.page = val
      this.listUpdate()
    },
    //商品橱窗每页数据条数改变
    handleProductSizeChange(pageSize) {
      this.shopWindow.pageSize = pageSize
      this.listUpdate()
    },
    //订单页码改变
    handleSalesCurrentChange(val) {
      this.sales.page = val
      this.listUpdate()
    },
    //订单每页数据条数改变
    handleSalesSizeChange(pageSize) {
      this.sales.pageSize = pageSize
      this.listUpdate()
    },
    //订单页码改变
    handleCommentCurrentChange(val) {
      this.comments.page = val
      this.listUpdate()
    },
    //订单每页数据条数改变
    handleCommentSizeChange(pageSize) {
      this.comments.pageSize = pageSize
      this.listUpdate()
    },
  },
}
</script>

<style lang="less" scoped>
.page{
  width:100%;

  .card {
    margin-bottom: 25px;

    .card-title{
      display: flex;
      width: 100%;
      align-items: center;

      .right{
        flex:1;
        display: flex;
        justify-content: right;
      }
    }

    .card-content{
      width: 100%;
      border:1px solid #ededed;
      border-collapse:collapse;

      .last-item{
        display: flex;
        min-height: 80px;
        width: 100%;
      }

      .last-label{
        width: 120px;
        border-right: 1px solid #ededed;
        background-color: #f2f2f2;
        min-heigth: 80px;
        text-align: center;

        .last-text{
          height:100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .last-data{
        flex:1;
        padding: 10px;
        display: flex;
        align-items: center;
        word-break:break-all;
      }

      tr:last-child{
        height:80px;
      }

      .tr{
        height:80px;

        .td{
          border:1px solid #ededed;
          height: 80px;
          overflow: hidden;

          .content-item{
            display: flex;
            min-height: 80px;

            .item-label{
              width: 120px;
              border-right: 1px solid #ededed;
              background-color: #f2f2f2;
              min-heigth: 80px;
              text-align: center;

              .label-text{
                height:100%;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }

            .item-data{
              padding: 10px;
              min-height:80px;
              display: flex;
              align-items: center;
              flex:1;
              word-break:break-all;

              .click{
                color: rgb(30, 159, 255);
                text-decoration:underline;
                cursor:pointer;
              }

              .click:focus{
                color: rgb(85,26,139);
              }

              img{
                width: 75px;
                height: 75px;
              }
            }
          }
        }
      }
    }

    .cover{
      display: flex;
      align-items: center;
    }

    .pager-group{
      width:100%;
      margin: 20px 0;
    }

    .note{
      line-height: 25px;
    }
  }
}
</style>
